---
title: Switch
menu: Components
order: 100
---

import { Switch } from 'smooth-ui-sc-next'
import { Props } from '../../components/Props'

# Switch

## Basic

It receives the same props as controlled inputs, such as `checked` and `onChange`.

```jsx live noInline
import React from 'react'
import { Switch, Boxer } from '@smooth-ui/core-sc'

function Example() {
  const [checked, setChecked] = React.useState(false)
  const toggle = () => setChecked(!checked)
  return <Switch checked={checked} onChange={toggle} />
}

render(<Example />)
```

## useCheckboxState

A `Switch` acts as a checkbox, so `useCheckboxState` is usable exactly like on a `Checkbox`.

```jsx live noInline
import React from 'react'
import { Switch, useCheckboxState } from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return <Switch {...checkbox} />
}

render(<Example />)
```

## Sizes

Set scales using `scale` prop like `"xs"`, `"sm"`, `"lg"` or `"xl"`. The default scale is `"base"`.

```jsx live noInline
import React from 'react'
import {
  Switch,
  useCheckboxState,
  FormCheck,
  FormCheckLabel,
  Boxer,
} from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={3}>
      <FormCheck>
        <Switch {...checkbox} scale="xs" name="xs" />
        <FormCheckLabel scale="xs" name="xs">
          Extra small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="sm" name="sm" />
        <FormCheckLabel scale="sm" name="sm">
          Small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="base" name="base" />
        <FormCheckLabel scale="base" name="base">
          Base (default)
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="lg" name="lg" />
        <FormCheckLabel scale="lg" name="lg">
          Large
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="xl" name="xl" />
        <FormCheckLabel scale="xl" name="xl">
          Extra large
        </FormCheckLabel>
      </FormCheck>
    </Boxer>
  )
}

render(<Example />)
```

## Disabled

Disable using `disabled` prop.

```jsx live noInline
import React from 'react'
import { Switch, useCheckboxState } from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState({ state: true })
  return <Switch {...checkbox} disabled />
}

render(<Example />)
```

## With labels

Add labels using `labeled` props. Set custom labels using `labelOn` and `labelOff`.

```jsx live noInline
import React from 'react'
import { Switch, Boxer, useCheckboxState } from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={1}>
      <Switch {...checkbox} labeled />
      <Switch {...checkbox} labeled onLabel="I" offLabel="O" />
    </Boxer>
  )
}

render(<Example />)
```

## Accessibility

`Switch` uses [Reakit Checkbox](https://reakit.io/docs/checkbox) under the hood, it means it follows [WAI-ARIA Checkbox Pattern](https://www.w3.org/TR/wai-aria-practices/#checkbox).

[Read more about accessibility on Reakit](https://reakit.io/docs/checkbox/#accessibility).

## API

### useCheckboxState

See [Reakit documentation](https://reakit.io/docs/checkbox/#usecheckboxstate-1).

### Switch

<Props of={Switch} />

`Switch` also includes a bunch of state properties, see [Reakit documentation](https://reakit.io/docs/checkbox/#checkbox).
